<template>
    <div>
         <el-dialog
            v-model="dialogVisible"
            title="查看商品信息"
            width="30%"
            :before-close="handleClose"
        >
            <div>
                <el-form ref="form" :model="detailData" label-width="120px">
                    <el-form-item label="产品名称：">
                        <span>{{ detailData.name }}</span>
                    </el-form-item>
                    <el-form-item label="品牌：">
                        <span>{{ detailData.brandName }}</span>
                    </el-form-item>
                    <el-form-item label="企业名称：">
                        <span>{{ detailData.manufacture }}</span>
                    </el-form-item>
                    <el-form-item label="规格：">
                        <span>{{ detailData.productSpec }}</span>
                    </el-form-item>
                    <el-form-item label="商品规格：">
                        <span>{{ detailData.gbCode }}</span>
                    </el-form-item>
                    <el-form-item label="产地：">
                        <span>{{ detailData.address }}</span>
                    </el-form-item>
                    <el-form-item label="图片">
                        <el-image
                            v-for="item in imgUrl"
                            :key="item.uid"
                            style="width: 100px; height: 100px,margin-right:2%"
                            :src="item.name"
                        ></el-image>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
            <span class="dialog-footer">
             
                <el-button type="primary" @click="onSubmit">确定</el-button
                >
            </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import { ref, reactive, toRefs, onBeforeMount,getCurrentInstance,nextTick } from "vue";
export default {
    props:{
        detailData: Object
    },
    setup(props, ctx){
        console.log(props.detailData, ctx)
        const { proxy } = getCurrentInstance()
        const state = reactive({
            dialogVisible:true,
            imgUrl:[]
        })
        onBeforeMount(()=>{
              initPic(JSON.parse(props.detailData.itemInfo) )
        })
        const initPic = (val) =>{
           
            if(val.productImgs && val.productImgs.length>0){
                 console.log(val.productImgs)
                 state.imgUrl = val.productImgs
            }
        }
        // const {itemInfo} = toRefs(props.detailData).
        const onSubmit = () =>{
            proxy.$emit('onSubmit')
        }

        const handleClose = () => {
            proxy.$emit('onSubmit')
        }
        return{
            ...toRefs(state),
            onSubmit,
            handleClose,
            initPic
        }
    }
}
</script>
<style lang="scss" scoped>
:deep(.el-dialog__footer){
    text-align: center!important;
}
</style>